<template>
  <div id="app">
    <!--    首部  -->
    <div id="logoin">
      <!-- 导航栏按钮 -->
      <div id="daoHang" style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px; ">
        <div class="w el-row" style="padding: 15px; line-height: 76px;">
          <div class="el-col el-col-12">
            <ul class="imgStyle clearfix">
              <li><img alt="" class="logo" src="../assets/logo.png" lazy="loaded" @click="goHome">
              </li>
              <li><img alt="" class="textImg" src="../assets/系统.png" lazy="loaded"></li>
            </ul>
          </div>
          <div class="el-col el-col-12" style="text-align: right;">
            <el-button type="primary" v-if="noLoaded" @click="dialogFormVisible_user = true">用户登录</el-button>
            <el-button type="button" v-if="noLoaded" @click="dialogFormVisible_admin = true">管理登录</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div id="windows">
      <!-- 用户登录 -->
      <el-dialog clss="userLoadWindows" title="用户登录" :visible.sync="dialogFormVisible_user" :center="true" width="400px"
        :style="loadBgStyle">
        <div>
          <img src="../assets/用户.png" style="display: block; margin: 20px auto; padding-bottom: 10px;" lazy="loaded">
        </div>

        <div>
          <el-form :model="loadForm" :rules="loadRules" ref="loadForm" style="margin-top: 30px; padding-right: 25px;">
            <el-form-item label="用户名：" :label-width="formLabelWidth" prop="uname">
              <el-input v-model="loadForm.uname" placeholder="请输入用户名" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="密  码：" :label-width="formLabelWidth" prop="psw">
              <el-input v-model="loadForm.psw" placeholder="请输入密码" autocomplete="off" show-password>
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitUserLoadingForm('loadForm')" style="width: 85%; border-radius: 20px;">登
            录</el-button>
          <div style="width: 100%; display: flex; justify-content: space-evenly; margin-top: 10px;">
            <el-button type="text" @click="load_forgetPsw()">忘记密码？</el-button>
            <el-button type="text" @click="load_register()">注册</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 用户忘记密码？界面 -->
      <el-dialog title="找回密码O.O" :visible.sync="dialogFormVisible_forgetPSW" :center="true" width="400px">
        <div>
          <img src="../assets/猫头鹰.png" style="display: block; margin:auto;" lazy="loaded">
        </div>

        <div>
          <el-form :model="forgetForm" ref="forgetForm" :rules="registerRules"
            style="margin-top: 30px; padding-right: 25px;">
            <el-form-item label="手机号：" :label-width="formLabelWidth" prop="mobile">
              <el-input v-model="forgetForm.mobile" placeholder="请输入目前可用的手机号" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="验证码：" :label-width="formLabelWidth" prop="code">
              <div style="display: flex; align-items: center;">
                <el-input v-model="forgetForm.code" placeholder="请输入验证码" autocomplete="off">
                </el-input>
                <el-button type="primary" plain v-show="getCode_on" @click="button_getCode2()">获取验证码</el-button>
                <el-button type="primary" plain disabled v-show="getCode_dis" :loading="getCode_on">{{ this.time
                }} s后再发送</el-button>
              </div>
            </el-form-item>
            <el-form-item label="密  码：" :label-width="formLabelWidth" prop="psw">
              <el-input v-model="forgetForm.psw" placeholder="请输入密码" autocomplete="off" show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码：" :label-width="formLabelWidth" prop="rlpsw">
              <el-input v-model="forgetForm.rlpsw" placeholder="请再次输入密码" autocomplete="off" show-password>
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitUserForgetForm('forgetForm')" style="width: 85%;">重置密码</el-button>
          <div style="width: 100%; display: flex; justify-content: space-evenly; margin-top: 10px;">
            <el-button type="text" @click="dialogFormVisible_forgetPSW = false">想起来了？去登陆</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 用户注册页面 -->
      <el-dialog title="欢迎注册~" :visible.sync="dialogFormVisible_register" :center="true" width="400px">
        <div>
          <img src="../assets/猫.png" style="display: block; margin: 20px auto;" lazy="loaded">
        </div>

        <div>
          <el-form :model="registerForm" ref="registerForm" :rules="registerRules"
            style="margin-top: 30px; padding-right: 25px;">
            <el-form-item label="用户名：" :label-width="formLabelWidth" prop="uname">
              <el-input v-model="registerForm.uname" placeholder="请输入用户名" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="手机号：" :label-width="formLabelWidth" prop="mobile">
              <el-input v-model="registerForm.mobile" placeholder="请输入手机号" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="验证码：" :label-width="formLabelWidth" prop="code">
              <div style="display: flex; align-items: center;">
                <el-input v-model="registerForm.code" placeholder="请输入验证码" autocomplete="off">
                </el-input>
                <el-button type="primary" plain v-show="getCode_on" @click="button_getCode()">获取验证码</el-button>
                <el-button type="primary" plain disabled v-show="getCode_dis" :loading="getCode_on">{{ this.time
                }} s后再发送</el-button>
              </div>
            </el-form-item>
            <el-form-item label="密  码：" :label-width="formLabelWidth" prop="psw">
              <el-input v-model="registerForm.psw" placeholder="请输入密码" autocomplete="off" show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码：" :label-width="formLabelWidth" prop="rlpsw">
              <el-input v-model="registerForm.rlpsw" placeholder="请再次输入密码" autocomplete="off" show-password>
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitUserRegisterForm('registerForm')" style="width: 85%;">注 册</el-button>
          <div style="width: 100%; display: flex; justify-content: space-evenly; margin-top: 10px;">
            <el-button type="text" @click="dialogFormVisible_register = false">已有账号？去登陆</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 管理员登录 -->
      <el-dialog title="管理员登录" :visible.sync="dialogFormVisible_admin" :center="true" width="400px"
        style="font-family: cursive;" :style="amdLoadBgStyle">
        <div>
          <img src="../assets/系统管理员管理.png" style="display: block; margin: 20px auto;" lazy="loaded">
        </div>

        <div>
          <el-form :model="admForm" :rules="admRules" ref="admForm" style="margin-top: 30px; padding-right: 25px;">
            <el-form-item label="用户名：" :label-width="formLabelWidth" prop="user">
              <el-input v-model="admForm.user" placeholder="请输入用户名" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="密码：" :label-width="formLabelWidth" prop="psw">
              <el-input v-model="admForm.psw" placeholder="请输入密码" autocomplete="off" show-password>
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="danger" round @click="submitAdminLoadingForm('admForm')" style="width: 85%;">登 录</el-button>
        </div>
      </el-dialog>
    </div>
    <!--  内容体  -->
    <div id="body">
      <div class="el-row" :style="bgStyle">
        <div class="el-col el-col-24">
          <ul class="search" style="margin-top: 180px;">
            <li>
              <p style="color: rgb(255, 255, 255);">智慧场馆</p>
            </li>
            <li><span style="color: rgb(255, 255, 255);">INTELLIGENT VENUES</span></li>
            <li class="searchInput" style="width: 674px;">
              <div class="input-with-select el-input el-input-group el-input-group--append">
                <input type="text" autocomplete="off" placeholder="请输入活动类型名称" class="el-input__inner noYuan">
                <div class="el-input-group__append">
                  <button type="button" class="el-button el-button--default"
                    style="color: rgb(255, 255, 255);"><img src="../assets/搜索.png" alt="Some description" />
                  </button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="w el-row">
        <div class="APPmodule el-col el-col-24">
          <div class="el-carousel el-carousel--horizontal">
            <div class="el-carousel__container" style="height: 150px;">
              <div class="el-carousel__item is-active is-animating" style="transform: translateX(0px) scale(1);">
                <ul class="clearfix">
                  <li><a href="javascript:;"><img alt="" src="../assets/舞蹈.png" lazy="loading" @click="dialogFormVisible_user = true"></a>
                    <p>舞蹈</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/足球.png" lazy="loaded" @click="dialogFormVisible_user = true"></a>
                    <p>足球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/篮球.png" lazy="loading" @click="dialogFormVisible_user = true"></a>
                    <p>篮球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/排球.png" lazy="loaded" @click="dialogFormVisible_user = true"></a>
                    <p>排球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/网球.png" lazy="loading" @click="dialogFormVisible_user = true"></a>
                    <p>网球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/飞盘.png" lazy="loading" @click="dialogFormVisible_user = true"></a>
                    <p>飞盘</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/羽毛球.png" lazy="loaded" @click="dialogFormVisible_user = true"></a>
                    <p>羽毛球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/乒乓球.png" lazy="loaded" @click="dialogFormVisible_user = true"></a>
                    <p>乒乓球</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix recommended el-col el-col-24">
          <div class="line fl"></div>
          <div class="fl">体育场馆</div>
          <a href="javascript:;" class="fr" @click="dialogFormVisible_user = true">
            更多
            <span class="spanArrow">&gt;</span></a>
        </div>
        <div class="el-col el-col-24">
          <ul class="cardUl clearfix">
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg.jpg" class="image" alt="" @click="dialogFormVisible_user = true"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      文昌校区体育馆</h3>
                    <p title="文昌校区" class="address">地址: 文昌校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg2.jpg" class="image" alt="" @click="dialogFormVisible_user = true"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      剑盘校区体育馆</h3>
                    <p title="文昌校区" class="address">地址: 剑盘校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg3.jpg" class="image" alt="" @click="dialogFormVisible_user = true"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      柳石校区体育馆</h3>
                    <p title="柳东校区" class="address">地址: 柳石校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg4.jpg" class="image" alt="" @click="dialogFormVisible_user = true"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      柳东校区体育馆</h3>
                    <p title="文昌校区" class="address">地址: 柳东校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--  尾部   -->
    <div class="footer" id="end" style="background: #f9f9f9;color: #7e8187;">
      <div class="container container-lg clearfix">
        <div class="pull-left footer-left" style="margin-right: 22px; margin-top: 20px">
          <div class="footer-tt">文昌校区</div>
          <p>地址: 广西柳州市城中区文昌路2号</p>
          <p>邮编: 545006</p>
        </div>
        <div class="pull-left footer-left" style="margin-right: 22px; margin-top: 20px">
          <div class="footer-tt">柳石校区</div>
          <p>地址: 广西柳州市鱼峰区柳石路257号</p>
          <p>邮编: 545005</p>
        </div>
        <div class="pull-left footer-left" style="margin-right: 22px; margin-top: 20px">
          <div class="footer-tt">柳东校区</div>
          <p>地址: 广西柳州市鱼峰区官塘大道19号</p>
          <p>邮编: 545616</p>
        </div>
        <div class="pull-right footer-right" style="margin-top: 20px">
          <p><span>电话: </span>0772-2685979（校办）&nbsp;&nbsp;0772-2687698（传真）
          </p>
          <p>本专科招生: 0772—2687735&nbsp;&nbsp;研究生招生: 0772—2685375</p>
          <p>继续教育招生: 0772—2686688</p>
        </div>
      </div>
      <div class="footer-bottom text-center">备案号: <img src="../assets/footer01.png" alt="">桂XXX备XXXXXXXX号-x<img
          src="../assets/footer02.png">前置审核编号:
        桂xxxxxxxx-xx<span>信息管理: 没人管理</span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userLoading,
  userRegisting,
  userPostCode,
  hasResigster,
  isCode,
  userForgeting,
  adminLoading
} from "@/api/base/user";

export default {
  data() {
    return {
      // 登陆状态
      noLoad: true,
      // 主页背景格式
      bgStyle: {
        backgroundImage: 'url(' + require('../assets/城市.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        height: '514px'
      },
      // 登录背景
      loadBgStyle: {
        backgroundImage: 'url(' + require('../assets/月亮.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      },
      // 管理登录背景
      amdLoadBgStyle: {
        backgroundImage: 'url(' + require('../assets/cat.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      },
      // 背景模糊
      blurEnabled: false,
      // 窗口可见
      dialogFormVisible_user: this.$route.params.dialogFormVisible_user,
      dialogFormVisible_admin: this.$route.params.dialogFormVisible_admin,
      dialogFormVisible_register: false,
      dialogFormVisible_forgetPSW: false,
      // 登录/信息按钮可见
      noLoaded: false,
      // 验证码按钮
      getCode_on: true,
      getCode_dis: false,
      time: 60,
      // 个人信息抽屉
      drawerUser: false,
      drawerMang: false,
      lockInfo: true,
      // 个人信息
      userInfoForm: {
        uname: '',
        age: '保密',
        sex: '保密',
        college: '保密',
        cla: '保密',
        credit: 0,
        mobile: '',
        psw: ''
      },
      token:'',
      // 用户登陆表单
      loadForm: {
        uname: '',
        psw: ''
      },
      // 用户登陆状态
      loadingUser: false,
      // 登录信息校验
      loadRules: {
        uname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ],
        psw: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      // 管理登录表单
      admForm: {
        user: '',
        psw: ''
      },
      // 管理登录信息校验
      admRules: {
        user: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ],
        psw: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      // 用户注册表单
      registerForm: {
        uname: '',
        mobile: '',
        code: '',
        psw: '',
        rlpsw: ''
      },
      // 用户找回密码表单
      forgetForm: {
        mobile: '',
        code: '',
        psw: '',
        rlpsw: ''
      },
      // 注册表单信息校验
      registerRules: {
        user: [
          { required: true, message: '请填一下用户名!', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号!', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请先输入验证码' },
          { min: 4, max: 6, message: '乱填你至少位数要对吧O.o?', trigger: 'blur' }
        ],
        psw: [
          { required: true, message: '请输入您的密码(/ω＼*)', trigger: 'blur' }
        ],
        rlpsw: [
          { required: true, message: '请再次确认您的密码(/ω•＼*)', trigger: 'blur' }
        ]
      },
      // 注册表单信息label的长度
      formLabelWidth: '100px'
    };
  },
  watch: {

  },
  computed: {

  },
  methods: {
    // 用户登录信息弹窗--成功
    loadingSucceed() {
      this.$message({
        message: '登陆成功 欢迎欢迎！\\(@^0^@)/',
        type: 'success'
      });
    },
    // 管理员登录信息弹窗--成功
    adminLoadingSucceed() {
      this.$message({
        message: '登陆成功 欢迎欢迎！\\(@^0^@)/',
        type: 'success'
      });
    },
    // 注册信息弹窗--成功
    registingSucceed() {
      this.$message({
        message: '你已经完成注册了！快去体验一下你的新账号吧b（￣▽￣）d　',
        type: 'success',
        duration: 5000
      });
    },
    // 找回密码信息弹窗--成功
    forgetingSucceed() {
      this.$message({
        message: '重新设置了密码！这次一定要好好记住咯',
        type: 'success',
        duration: 5000
      });
    },
    // 注册信息弹窗--手机号已被注册--错误
    hasRegistingError() {
      this.$message({
        showClose: true,
        message: '手机号已被注册(；′⌒`)',
        type: 'error'
      });
    },
    // 注册信息弹窗--验证码错误--错误
    isCodeError() {
      this.$message({
        showClose: true,
        message: '验证码错误(；′⌒`)',
        type: 'error'
      });
    },
    // 忘记密码信息弹窗--手机号未注册注册--错误
    hasForgetingError() {
      this.$message({
        showClose: true,
        message: '该手机号未注册用户',
        type: 'error'
      });
    },
    // 用户信息更新--成功
    updateInfoSucceed() {
      this.$notify({
        title: '你有一个通知~',
        message: '信息更新完毕(*^_^*)~',
        position: 'top-left',
        type: 'success'
      });
    },
    // 用户信息更新--未知错误
    updateInfoError() {
      this.$notify.error({
        title: '你有一个警告！',
        message: '信息更新出错啦！！',
        position: 'top-left',
      });
    },
    // 注册获取验证码按钮
    async button_getCode() {
      let res = await this.judgeMobile(this.registerForm)
      if (res == true) {
        this.load_Code(this.registerForm);
        this.setTime();
      } else {
        this.hasRegistingError();
      }
    },
    // 校验手机号是否被注册
    async judgeMobile(mobile) {
      let res = await hasResigster(mobile);
      if (res.data == "Error") {
        return false;
      }
      return true;
    },
    // 发送验证码请求
    async load_Code(Form) {
      let t = Form;
      await userPostCode(t);
    },
    // 验证码倒计时
    setTime() {
      if (this.time == 0) {
        this.getCode_on = true;
        this.getCode_dis = false;
        this.time = 60;
        return;
      } else {
        this.getCode_on = false;
        this.getCode_dis = true;
        this.time--;
      }

      setTimeout(this.setTime, 1000);
    },
    // 校验验证码
    async isCode() {
      let t = {
        ...this.registerForm,
      }
      let res = await isCode(t);
      if (res.data != "Error") {
        return true;
      }
      return false;
    },
    // 用户登录请求
    async load_loading() {
      let t = {
        // 展开对象拿到属性放在这个对象中
        ...this.loadForm,
      }
      try {
        let res = await userLoading(t);
        if (res != null) {
          localStorage.setItem('token', res.data)
          this.loadingSucceed();
          this.$router.push('/');
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 用户注册请求
    async load_registing() {
      let t = {
        ...this.registerForm,
      }
      let code = await this.isCode();
      if (code == true) {
        try {
          let res = await userRegisting(t);
          if (res != null) {
            this.registingSucceed();
            this.dialogFormVisible_register = false;
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        this.isCodeError();
      }
    },
    // 用户登陆表单校验
    submitUserLoadingForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.load_loading();
        }
      });
    },
    // 管理员登陆表单校验
    submitAdminLoadingForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.admin_loading();
        }
      });
    },
    // 用户注册表单校验
    submitUserRegisterForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.load_registing();
        }
      });
    },
    //登陆界面的忘记密码？按钮->显示忘记密码界面
    load_forgetPsw() {
      this.dialogFormVisible_forgetPSW = true;
    },
    // 忘记密码获取验证码按钮
    async button_getCode2() {
      let res = await this.judgeMobile(this.forgetForm)
      if (res == false) {
        this.load_Code(this.forgetForm);
        this.setTime();
      } else {
        this.hasForgetingError();
      }
    },
    // 用户忘记密码表单校验
    submitUserForgetForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.load_forgeting();
        }
      });
    },
    // 用户忘记密码请求
    async load_forgeting() {
      let t = {
        ...this.forgetForm,
      }
      let code = await this.isCode();
      if (code == true) {
        try {
          let res = await userForgeting(t);
          if (res != null) {
            this.forgetingSucceed();
            this.dialogFormVisible_register = false;
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        this.isCodeError();
      }
    },
    // 登陆界面的注册按钮->显示注册界面
    load_register() {
      this.dialogFormVisible_register = true
    },
    // 管理员登录请求
    async admin_loading() {
      let t = {
        // 展开对象拿到属性放在这个对象中
        ...this.admForm,
      }
      try {
        let res = await adminLoading(t);
        if (res != null) {
          localStorage.setItem('token', res.data)
          this.adminLoadingSucceed();
          this.$router.push('/adminMenu');
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 跳转主页面
    goHome() {
      this.$router.push('/userMenu')
    },
  },
  created() {
    this.noLoaded = true;
    this.token = localStorage.getItem('token');
  }
}  
</script>